<template>
  <div>
    <el-table
      :data="renderData"
      style="width: 100%;min-height:50vh;"
      border
      width="50"
    >
      <slot />
    </el-table>
    <div class="center">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 8, 16, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  props: {
    tableData: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      renderData: [],
      allData: []
    }
  },
  computed: {

  },
  watch: {
    tableData(newVal) {
      console.log('tableData发生变化')
      this.allData = newVal
      this.go(this.pageNum)
    }
  },
  methods: {
    go(n) {
      this.pageNum = n
      this.renderData = this.allData.slice((n - 1) * this.pageSize, n * this.pageSize)
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.go(this.pageNum)
    },
    handleCurrentChange(n) {
      this.pageNum = n
      this.go(n)
    }
  }
}
</script>

<style lang="scss" scoped>
.center{
    margin-top: 16px;
    // display: flex;
    // justify-content: center;
}
</style>
